<template>
  <view>
    <view class="daren" v-if="type===1">
      <view class="icon">
        <image mode="heightFix" :src="image_host+'pinglundaren.png'"></image>
      </view>
      <view class="text-box">
        <view class="text"><image mode="aspectFit" :src="image_host+'pinglun-text.png'"></image></view>
        <view class="dengji" v-if="index>0">V{{index}}</view>
      </view>
    </view>
    <view class="daren" v-if="type===2">
      <view class="icon">
        <image mode="heightFix" :src="image_host+'icon_shanyaohui'+index+'.png'"></image>
      </view>
      <view class="text-box" :class="parseInt(index)===1?'text-box1':'text-box-n'">
        <view class="text"><image mode="aspectFit" :src="image_host+'shanyao-text2.png'"></image></view>
        <view class="dengji" style="color: #fff">V{{index}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props:['type','index'],
  data() {
    return {
      image_host:this.image_host+'quanzi/'
    };
  },
  created() {

  },
}
</script>

<style lang="scss">
.daren{
  height: 46upx;
  display: flex;
  align-items: center;
  position: relative;
  margin-left: 14upx;
  .icon{
    height: 42upx;
    position: absolute;
    top: 50%;
    left: -10upx;
    transform: translate(0%,-50%);
    image{
      height: 100%;
      max-width: 50upx;
    }
  }
  .text-box{
    box-sizing: border-box;
    border-radius: 20upx 14upx 14upx 20upx;
    background: linear-gradient(262deg, #FFEEDC 0%, #F2B485 100%);
    display: flex;
    align-items: center;
    padding: 5upx 8upx 5upx 35upx;
  }
  .text{
    width: 78upx;
    height: 18upx;
    display: flex;
    align-items: center;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .dengji{
    color: #C9623C;
    font-size: 20upx;
    font-weight: 600;
  }
}
.text-box1{
  background: linear-gradient(248deg, rgba(114, 137, 172, .6) 0%, rgba(83, 107, 127, .6) 100%) !important;
}
.text-box-n {
  background: linear-gradient(248deg, #FFC244 0%, #FF9819 100%) !important;
}
</style>
